<template id="">
    <div class="">
      <home-header></home-header>
      <home-swiper :list="swiperList"></home-swiper>
      <home-icons :list="iconList"></home-icons>
      <div class="mp-listitem-con">
        <div class="mp-listentrance-item mp-left">
          <span class="iconfont">&#xe600;</span>
          {{this.$store.state.city}}
        </div>
        <div class="mp-listentrance-item">
          玩水季
        </div>
      </div>
      <home-recommend :list="recommendList"></home-recommend>
      <home-wenkend :list="weekendList"></home-wenkend>
    </div>
</template>
<script type="text/javascript">
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/icons'
import HomeRecommend from './components/Recommend'
import HomeWenkend from './components/Wenkend'
import axios from 'axios'
import { mapState } from 'vuex'

export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWenkend
  },
  data () {
    return {
      lastcity: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/index.json?city=' + this.city)
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (msg) {
      msg = msg.data
      if (msg.ret && msg.data) {
        const data = msg.data
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.weekendList = data.weekendList
      }
    }
  },
  //由于keeplive导致主页不再刷新，若城市更换则不仅新更新
  mounted () {
    this.lastcity = this.city
    this.getHomeInfo()
  },
  //故这里使用activated钩子
  activated () {
    if (this.lastcity !== this.city) {
      this.lastcity = this.city
      this.getHomeInfo()
    }
  }
}

</script>

<style media="screen" lang="stylus" scoped>
@font-face {
      font-family: 'iconfont';  /* project id 811572 */
      src: url('//at.alicdn.com/t/font_811572_youvhyb81ke.eot');
      src: url('//at.alicdn.com/t/font_811572_youvhyb81ke.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_811572_youvhyb81ke.woff') format('woff'),
      url('//at.alicdn.com/t/font_811572_youvhyb81ke.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_811572_youvhyb81ke.svg#iconfont') format('svg');
    }
  .mp-listitem-con
    width: 100%
    height: .98rem;
    border-top: 0.02rem solid #e0e0e0;
    background: #e7e7e7
    .mp-listentrance-item
      float: left;
      width: 50%;
      line-height: .97rem
      text-align: center;
      background: #fff
    .mp-left
      position: relative;
      &:after
        content: ""
        position: absolute;
        border-right: 0.02rem solid #e0e0e0;
        right: 0
        width: 1px;
        height: 100%
</style>
